"use client"

import { useState, useRef, useEffect } from "react"
import { cn } from "@/lib/utils"

export function ChatContent() {
    const [isLoading, setIsLoading] = useState(true)
    const iframeRef = useRef<HTMLIFrameElement>(null)

    // 处理iframe加载完成
    const handleIframeLoad = () => {
        setIsLoading(false)
        console.log("iframe loaded")
    }

    return (
        <div className="flex flex-col h-screen w-full bg-background">
            {/* 简化的标题栏 */}
            <header className="flex items-center border-b py-3 px-6 bg-background z-10 shrink-0"
                style={{ height: "64px", width: "100%" }}>

                <h1 className="text-2xl font-bold">AI辅导员</h1>
            </header>

            {/* iframe容器 - 使用明确的高度计算 */}
            <main className="flex-grow w-full relative" style={{ height: "calc(100vh - 64px)",  width: "calc(100vw - var(--sidebar-width, 256px))"}}>
                <iframe
                    ref={iframeRef}
                    src="http://218.197.18.196:8100/chat/share?shareId=joun910xhomz1n6icntpx0bk"
                    className={cn(
                        "w-full h-full border-0",
                        isLoading ? "opacity-0" : "opacity-100"
                    )}
                    title="AI辅导员"
                    sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
                    loading="lazy"
                    onLoad={handleIframeLoad}
                />

                {/* 加载状态指示器 */}
                {isLoading && (
                    <div className="absolute inset-0 flex items-center justify-center bg-background">
                        <div className="text-center">
                            <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                            <p className="text-lg font-medium">加载中...</p>
                        </div>
                    </div>
                )}
            </main>
        </div>
    )
}